<script setup>
import { nextTick, ref } from 'vue'
import { useMessage, useDialog } from 'naive-ui'
const electron = require('electron')
const { ipcRenderer } = electron
// 下拉框展示状态
const showDropdown = ref(false)
const changeTip = ref(true)
const x = ref(0)
const y = ref(0)
const options = [
  {
    label: '打开笔记',
    key: 'open'
  },
  {
    label: '删除笔记',
    key: 'delete'
  }
]

const handleMenu = (e) => {
  showDropdown.value = false
  e.preventDefault()

  nextTick().then(() => {
    showDropdown.value = true
    x.value = e.clientX
    y.value = e.clientY
  })
}
const onClickoutside = () => {
  showDropdown.value = false
}

// 改变提示文字
const handleTip = (flag) => {
  changeTip.value = flag
}

// prop 接收 note
const { note } = defineProps({
  note: Object
})

function formatTimestamp(timestamp) {
  const date = new Date(timestamp)

  // 获取月份和日期
  const month = date.getMonth() + 1 // 加 1 是因为 getMonth() 返回的月份是从 0 开始的
  const day = date.getDate()

  // 返回格式化的字符串
  return `${month}月${day}日`
}

const message = useMessage()
const dialog = useDialog()
// 点击下拉菜单的按钮
const handleSelect = (key) => {
  if (key === 'delete') {
    dialog.warning({
      title: '温馨提示',
      content: '你确定删除该笔记嘛',
      positiveText: '确定',
      negativeText: '不确定',
      onPositiveClick: () => {
        // 向主进程发送删除笔记
        ipcRenderer.send('note:delete', note.id)
        nextTick(() => {
          message.success('删除成功')
        })
      }
    })
  } else {
    // 打开笔记
    ipcRenderer.send('noteWindow:show', note.id)
  }
  showDropdown.value = false
}
</script>
<template>
  <div class="noteItem" @mouseenter="handleTip(false)" @mouseleave="handleTip(true)">
    <p class="content" v-html="note.content"></p>
    <div class="tip">
      <div v-if="changeTip" class="time">{{ formatTimestamp(note.createTime) }}</div>
      <div v-if="!changeTip" class="controls" @click="handleMenu">. . .</div>
      <n-dropdown
        placement="bottom-start"
        trigger="manual"
        :x="x"
        :y="y"
        :options="options"
        :show="showDropdown"
        :on-clickoutside="onClickoutside"
        @select="handleSelect"
      >
      </n-dropdown>
    </div>
  </div>
</template>

<style scoped lang="less">
.noteItem {
  position: relative;
  max-height: 130px;
  min-height: 60px;
  max-width: 350px;
  min-width: 280px;
  border-top: 4px solid var(--note-header-border-color);
  background-color: var(--note-content-background);
  margin-bottom: 10px;
  border-radius: 4px;
  padding: 20px 10px;
  display: grid;
  align-items: center;
  grid-auto-flow: row;
  word-break: break-all;
  overflow-y: hidden;
  // padding: 20px 0;
  &:hover {
    filter: brightness(95%);
  }
  .content {
    max-height: 90px;
    color: var(--note-content-color);
    font-size: 14px;
    height: 100%;
    overflow-y: hidden;
    line-height: 22px;
    user-select: none;
    -webkit-app-region: no-drag;
    padding-left: 20px;
  }

  .tip {
    position: absolute;
    right: 8px;
    top: 6px;
    font-size: 10px;
    color: var(--note-header-border-color);
    .controls {
      user-select: none;
      cursor: pointer;
      color: var(--search-placeholder-color);
      &:hover {
        color: var(--text-color);
      }
    }
  }
}
</style>
